<template>
  <div class="manage-page">
    <div class="page-header">
      <h1>车辆信息管理</h1>
      <div class="header-actions">
        <button @click="showCreateForm" class="create-button">新增车辆</button>
      </div>
    </div>
    
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else class="table-container">
      <div class="table-header">
        <div class="table-cell">品牌</div>
        <div class="table-cell">配置</div>
        <div class="table-cell">指导价</div>
        <div class="table-cell">全款落地</div>
        <div class="table-cell">操作</div>
      </div>
      <div 
        v-for="brand in brands" 
        :key="brand.id"
        class="brand-section"
      >
        <h3>{{ brand.name }}</h3>
        <div 
          v-for="config in brand.configs" 
          :key="config.id" 
          class="table-row"
        >
          <div class="table-cell">{{ brand.name }}</div>
          <div class="table-cell">{{ config.name }}</div>
          <div class="table-cell">{{ config.guidePrice }}元</div>
          <div class="table-cell">{{ config.fullPrice }}元</div>
          <div class="table-cell actions">
            <button @click="showConfigDetails(brand.name, config.name)" class="detail-button">详情</button>
            <button @click="showEditForm(brand.name, config.name)" class="edit-button">编辑</button>
            <button @click="confirmDelete(brand.name, config.name)" class="delete-button">删除</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 删除确认弹窗 -->
    <div v-if="configToDelete" class="modal" @click="cancelDelete">
      <div class="modal-content confirm-modal" @click.stop>
        <h3>确认删除</h3>
        <p>确定要删除 {{ configToDelete.brandName }} - {{ configToDelete.configName }} 吗？此操作不可恢复。</p>
        <div class="confirm-actions">
          <button @click="deleteConfig" class="confirm-delete-button">确认删除</button>
          <button @click="cancelDelete" class="cancel-delete-button">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBrands, deleteConfig } from '@/services/api';

export default {
  name: 'ManageView',
  data() {
    return {
      brands: [],
      loading: false,
      configToDelete: null
    };
  },
  async mounted() {
    await this.loadBrands();
  },
  methods: {
    async loadBrands() {
      this.loading = true;
      try {
        const response = await getBrands();
        this.brands = response.data;
      } catch (error) {
        console.error('加载品牌信息失败:', error);
      } finally {
        this.loading = false;
      }
    },
    showCreateForm() {
      // 跳转到新增车辆页面
      this.$router.push('/cars/create');
    },
    showEditForm(brandName, configName) {
      // 跳转到编辑车辆页面
      this.$router.push(`/cars/edit/${brandName}/${configName}`);
    },
    showConfigDetails(brandName, configName) {
      // 跳转到车辆详情页面
      this.$router.push(`/cars/detail/${brandName}/${configName}`);
    },
    confirmDelete(brandName, configName) {
      this.configToDelete = {
        brandName,
        configName
      };
    },
    async deleteConfig() {
      if (this.configToDelete) {
        try {
          await deleteConfig(this.configToDelete.brandName, this.configToDelete.configName);
          // 重新加载数据
          await this.loadBrands();
          this.cancelDelete();
        } catch (error) {
          console.error('删除配置失败:', error);
        }
      }
    },
    cancelDelete() {
      this.configToDelete = null;
    }
  }
};
</script>

<style scoped>
.manage-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  color: #2c3e50;
  margin: 0;
}

.create-button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.create-button:hover {
  background-color: #359c6d;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.table-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

.table-header {
  display: flex;
  background-color: #f5f5f5;
  font-weight: bold;
  color: #2c3e50;
  border-bottom: 2px solid #ddd;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #eee;
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  flex: 1;
  padding: 12px 15px;
  text-align: center;
}

.table-cell.actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.brand-section {
  margin-bottom: 20px;
}

.brand-section h3 {
  background-color: #eef5ff;
  padding: 10px 15px;
  margin: 0;
  color: #2c3e50;
  border-bottom: 1px solid #ddd;
}

.detail-button, .edit-button, .delete-button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.detail-button {
  background-color: #17a2b8;
  color: white;
}

.edit-button {
  background-color: #ffc107;
  color: #212529;
}

.delete-button {
  background-color: #dc3545;
  color: white;
}

.detail-button:hover {
  background-color: #138496;
}

.edit-button:hover {
  background-color: #e0a800;
}

.delete-button:hover {
  background-color: #c82333;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  max-width: 500px;
  width: 90%;
}

.confirm-modal {
  padding: 30px;
  text-align: center;
}

.confirm-modal h3 {
  margin-top: 0;
  color: #2c3e50;
}

.confirm-modal p {
  color: #666;
  margin: 20px 0;
}

.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.confirm-delete-button, .cancel-delete-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.confirm-delete-button {
  background-color: #dc3545;
  color: white;
}

.cancel-delete-button {
  background-color: #6c757d;
  color: white;
}

.confirm-delete-button:hover {
  background-color: #c82333;
}

.cancel-delete-button:hover {
  background-color: #5a6268;
}
</style>